Front-end Performance by Craig Buckler

Author:Craig Buckler [Various]
Language: eng
Format: epub
Publisher: SitePoint
Published: 2017-08-08T23:00:00+00:00

Only Animate CSS Opacity, Transforms and Filters

You've probably heard this piece of advice before, but just in case, it's worth going over it again: if you want your animations to run smoothly, animate only CSS opacity, transforms and filters. Animating everything else will put your browser under pressure to perform costly tasks in very little time, which often doesn't yield the best results.

As the Performance tool in your browser confirms, repeated layout and paint operations are not your friend.

However, each browser handles CSS properties a bit differently. If you want to know exactly which browser triggers layout and paint operations for which properties (especially when updating values for those properties, which is what is involved in web animation), head over to CSS Triggers.

To ensure performant animations, a popular approach is to force the browser to hand over the work of changing some properties to the GPU (Graphical Processing Unit), which relieves the browser's main thread of some pressure and takes advantage of hardware acceleration. You can do so by using the will-change CSS property, or the translateZ(0) and translate3d(0,0,0) hacks. All of these tricks will work, but if you overdo it you could actually get exactly what you're trying to avoid, i.e., janky animations.

I'm not going into the details of hardware acceleration for web animation performance, but if you'd like to dig deeper, take a look at the resources listed below.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.